<template>
	<view class="contain bg-color-f7">
		<view class="wrap-user-info">
			<view class="flex f-a-c">
				<view class="flex f-s-0 w-44 h-44 b-radius bg-img margin-r12" :style="userImg | bgimg()"></view>
				<view class="flex flex-1 f-c f-j-c">
					<view class="f13-size t-color-w">冰豆情感咨询</view>
					<view class="flex margin-t6">
						<view class="role-type">国家二级心理咨询师</view>
						<view class="role-type">婚姻家庭咨询师</view>
						<view class="role-type">情感咨询</view>
					</view>
				</view>
			</view>
			<view class="margin-t10 f12-size t-color-w">厦门知名情感机构导师，从业十年, 专注解决情感和婚姻问题, 曾调解数百起案例, 经验丰富</view>
		</view>
		
		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100vh;"> -->
			<view style="height: 128px;"></view>
			<view class="padding-lr10">
				<view  class="flex chat-info margin-t15">
					<view class="flex f-s-0 margin-r12 b-radius w-36 h-36 bg-img" :style="userImg | bgimg()"></view>
					<view class="flex padding-10  bg-color-w b-radius-5">您好，这里是冰豆情感咨询，来到这里，是在感情上遇到难处了吧。不要慌张，不妨先深呼吸几口让自己平静下来。</view>
				</view>
				<view  class="flex chat-info margin-t15">
					<view class="flex f-s-0 margin-r12 b-radius w-36 h-36 bg-img" :style="userImg | bgimg()"></view>
					<view class="flex padding-10  bg-color-w b-radius-5">当局者迷，旁观者清，来做个简单的小测试理清头绪吧，也让老师能更准确的帮到您。</view>
				</view>
				<view class="flex f-a-c f-j-c f10-size t-color-9 line-end">测试开始</view>
				<view  class="flex chat-info margin-t15">
					<view class="flex f-s-0 margin-r12 b-radius w-36 h-36 bg-img" :style="userImg | bgimg()"></view>
					<view class="flex padding-10  bg-color-w b-radius-5"> 您遇到哪方面的问题呢？</view>
				</view>
				<block v-for="item in list">
				<view v-if="item.type == 'left'" class="flex chat-info margin-t15">
					<view class="flex f-s-0 margin-r12 b-radius w-36 h-36 bg-img" :style="userImg | bgimg()"></view>
					<view class="flex padding-10  bg-color-w b-radius-5">{{item.value}}</view>
				</view>
				<view v-if="item.type == 'right'" class="flex f-j-e margin-t15">
					<view class="flex  chat-info info-r ">
						<view class="flex padding-10  bg-color-b2  b-radius-5 margin-r12">{{item.value}}</view>
						<view class="flex f-s-0  b-radius w-36 h-36  bg-img" :style="userImg | bgimg()"></view>
					</view>
				</view>
				</block>
				<block v-if="end">
				<view class="flex f-a-c f-j-c f10-size t-color-9 line-end">测试结束</view>
				<view @click="$refs.pay.open()" class="flex chat-info margin-t15">
					<view class="flex f-s-0 margin-r12 b-radius w-36 h-36 bg-img" :style="userImg | bgimg()"></view>
					<view class="flex padding-10  bg-color-w b-radius-5">想要解决当前碰到的问题，还需要您的配合，请在下面对话框里详细写下你们之间的问题，提交后我们会有咨询师对您的测试结果和问题做出专业的语音解答。</view>
				</view>
				</block>
			</view>
			<view style="height: 200px;"></view>
		<!-- </scroll-view> -->
		
		<view class="wrap-btn">
			<view v-if="end" class="padding-10 flex f-a-c">
				<view class="flex flex-1  b-radius-5 bg-color-f7 margin-r12 h-40 padding-lr10">
					<input type="text" value="" maxlength="-1" class="input" />
				</view>
				<view @click="$refs.pay.open()" class="flex f-a-c f-j-c b-radius-30 h-30 t-color-w bg-color-bf4 padding-lr10">求助</view>
			</view>
			<view v-if="!end" class="padding-10">
				<view class="flex f-j-s" :class="list1.length <= 2 ?'padding-lr50':''">
					<view @click="add(item)" v-for="(item,index) in list1"  class="flex f-a-c f-j-c b-radius-30 h-30 t-color-w bg-color-bf4 w-80">{{item}}</view>
				</view>
				<progress class="margin-t12" :percent="(step*100/7).toFixed(0)" show-info stroke-width="3" />
			</view>
		</view>
		
		<uni-popup ref="pay" type="bottom">
			<view class="wrap-layout-radius bg-color-linear-b">
				<view class="flex f-j-c f-a-c padding-tb15 f16-size f-w-b">专业咨询师为您保驾护航</view>
				<view class="grid grid-g10 grid-c-2 padding-lr10">
					<view @click="type = 1" :class="type == 1 ?'on':''" class="flex f-a-c f-j-c f-c bg-color-w b-radius-5 padding-lr10">
						<view class="flex f-j-e flex-1 w100">
							<view class="role-type p-r" style="right: -15px;">情感专家</view>
						</view>
						<view class="price t-color-p f-w-b margin-t6">39.9</view>
						<view class="f12-size margin-t10">语音聊20分钟</view>
						<view class="f10-size">
							<text class="t-color-9">问题解决率</text>
							<text>93%</text>
						</view>
						<view class="flex f-j-c text-c t-color-9 f10-size margin-t20"> 中科院心理咨询师 | 从业时间超过3年 | 个案时长超200h</view>
						<view class="flex f-j-c margin-t6">
							<view class="b-color-c b-radius-2 f10-size t-color-9 padding-lr2 h-16"> 婚姻咨询 | 婚姻引导</view>
						</view>
						<view class="padding-tb8"></view>
					</view>
					<view @click="type = 2" :class="type == 2 ?'on':''" class="flex f-a-c f-j-c f-c bg-color-w b-radius-5 padding-lr10">
						<view class="flex f-j-e flex-1 w100">
							<view class="role-type p-r" style="right: -15px;"> 特级咨询师</view>
						</view>
						<view class="price t-color-p f-w-b margin-t6">69.9</view>
						<view class="f12-size margin-t10">语音聊20分钟</view>
						<view class="f10-size">
							<text class="t-color-9">问题解决率</text>
							<text>93%</text>
						</view>
						<view class="flex f-j-c text-c t-color-9 f10-size margin-t20"> 中科院心理咨询师 | 从业时间超过5年 | 个案时长超500h</view>
						<view class="flex f-j-c margin-t6">
							<view class="b-color-c b-radius-2 f10-size t-color-9 padding-lr2 h-16"> 婚姻咨询 | 婚姻引导</view>
						</view>
						<view class="padding-tb8"></view>
					</view>
				</view>
				<view class="f12-size t-color-9 padding-10"> 选择老师后可获得20分钟语音通话时长</view>
				<view class="flex f-a-c f-j-c padding-tb20" @click="pay()">
					<view class="flex f-a-c f-j-c h-36 b-radius-30 bg-color-bf4 t-color-w w-120"> 去支付</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>
<style scoped>
@import '@/static/css/index/index.css';
</style>
<script>
	const $ = require('@/utils/api.js');
	let self = this;
	const info = '你知道吗？大多数的情感和婚姻问题是可以解决的，只不过很多人在慌张的情况无措的情况下很难正确的处理危机，往往采用死缠烂打，不断保证承诺，冷战，讨好，找朋友劝说，甚至直接看缘分等错误的方式，导致越来越糟，如果想解决此类问题，下面做一个测试吧！';
	const askList = ['请问您的年龄是？','你们结婚多久了，年限',' 感情出现什么问题？','以后出现矛盾，您们大多怎么解决','你们之间谁爱谁比较多？','Ta 和您在一起大多数的状态是？',' 如果想要解决这段婚姻问题，需要一个完整的周期时间，可能占用您20-90分钟进行语音资讯，您必须克制和耐心，焦急冲动只会功亏一篑，您是否能做到这一点？']
	const askType = [
		['情感问题','婚姻问题','情绪问题','家庭问题'],
		['70后','80后','90后','00后'],
		['1年以上',' 半年以上','1月以上','没多久'],
		['背叛','经常吵架','冷战','其他'],
		['持续冷战','激烈争吵','冷静沟通','其他'],
		['我更爱Ta','Ta更爱我'],
		['心不在焉','过于强势','比较贴切','太过冷漠'],
		['不可以','可以'],
	]
	export default {
		components: {},
		data() {
			return {
				type: 1,
				click_id: "",
				scrollTop: 0,
				list1: askType[0],
				step: 0,
				active: 0,
				list: [],
				userImg: 'https://zst-1308798171.cos.ap-nanjing.myqcloud.com/def/4974a202311131603334544.jpg',
				end: false,
			};
		},
		onLoad: function(options) {
			console.log(options)
			self = this;
			this.click_id = options.click_id;
			this.init();
		},
		onShow() {
		},
		methods: {
			add(item) {
				console.log(item,this.step);
				this.list.push({
					type: 'right',
					value: item
				})
				if(this.step == 0) {
					this.list.push({
						type: 'left',
						value: info
					})
				};
				if(askList[this.step] && askList[this.step] != '') {
					this.list.push({
						type: 'left',
						value: askList[this.step]
					})
				}
				
				this.step += 1;
				
				this.list1 = askType[this.step] || [];
				if(this.step > 7) {
					this.end = true;
				}
				this.goBottom();
			},
			goBottom() {
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: 1000
					})
					this.scrollTop = 1000*Math.random();
				})
			},
			pay() {
				uni.request({
					url:"https://data.bingdou.site/server/bingdouyanzhidypay/index/preOrder",
					data: {
						"click_id": this.click_id,
						"h5":1,
						"type":this.type
					},
					method: "post",
					success(result) {
						console.log(result)
						// return
						window.location.href=result.data.data
					}
				})
			},
			init() {
			},
		},
		computed: {},
		created() {
		},
		mounted() {},
		destroyed() {},
		onPullDownRefresh() {
		},
		onReachBottom() {
			
		}
	}
</script>